<template>
	<view>
		<swiper class="screen-swiper round-dot" :indicator-dots="true" :circular="true" :autoplay="true" interval="5000"
		 duration="500">
			<swiper-item v-for="(item,index) in 4" :key="index">
				<image src="https://skv4.oss-cn-hangzhou.aliyuncs.com/app/skv4/common1568381860000/toutu.png" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		<view class="VerticalBox">
			<scroll-view class="VerticalNav nav" scroll-y scroll-with-animation :scroll-top="verticalNavTop" style="height:calc(100vh - 375upx)">
				<view class="cu-item" :class="index==tabCur?'text-green cur':''" v-for="(item,index) in dataList" :key="index" @tap="TabSelect"
				 :data-id="index">
					{{item.name}}
				</view>
			</scroll-view>
			<scroll-view class="VerticalMain" scroll-y scroll-with-animation style="height:calc(100vh - 375upx)"
			 :scroll-into-view="'main-'+mainCur" @scroll="VerticalMain">
				<view class="padding-top padding-lr" v-for="(item,index) in dataList" :key="index" :id="'main-'+index">
					<view class="cu-bar solid-bottom bg-white">
						<view class="action">
							<text class="cuIcon-title text-green"></text> {{item.name}}</view>
					</view>
					<view class="cu-list menu-avatar">
						<view class="cu-item" v-for="(itemm,indexx) in item.datalist" :key="indexx">
							<view class="text-grey">{{itemm.text}}</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				tabCur: 0,
				mainCur: 0,
				verticalNavTop: 0,
				load: true,
				dataList:[{
					"level": "1",
					"datalist": [{
						"file_url": "https://jysh.oss-cn-qingdao.aliyuncs.com/community/8-申请办理临时救助.pdf",
						"ORG_ID": "11210101000000MZJD-01",
						"service_type": "general",
						"type_name": "社会救助",
						"type_pid": "11210101000000MZJD",
						"form_url": "https://jysh.oss-cn-qingdao.aliyuncs.com/community/8-%E4%B8%B4%E6%97%B6%E6%95%91%E5%8A%A9%E6%83%85%E5%86%B5%E7%99%BB%E8%AE%B0%E8%A1%A8.pdf",
						"level": "2",
						"is_wsbl": "1",
						"type_id": "11210101000000MZJD-01",
						"id": "11210101000000MZJD5212000186000",
						"text": "申请临时救助",
						"org_code": "11210101000000MZJD"
					}, {
						"file_url": "https://jysh.oss-cn-qingdao.aliyuncs.com/community/16-申请办理困难残疾人生活补贴.pdf",
						"ORG_ID": "11210101000000MZJD-04",
						"service_type": "general",
						"type_name": "残疾人福利",
						"type_pid": "11210101000000MZJD",
						"form_url": "https://jysh.oss-cn-qingdao.aliyuncs.com/community/16-%E7%94%B3%E8%AF%B7%E5%8A%9E%E7%90%86%E5%9B%B0%E9%9A%BE%E6%AE%8B%E7%96%BE%E4%BA%BA%E7%94%9F%E6%B4%BB%E8%A1%A5%E8%B4%B4(%E5%90%88%E5%B9%B6%E8%A1%A8%E5%8D%95).pdf",
						"level": "2",
						"is_wsbl": "1",
						"type_id": "11210101000000MZJD-04",
						"id": "11210101000000MZJD5212000207000",
						"text": "申请办理困难残疾人生活补贴",
						"org_code": "11210101000000MZJD"
					}, {
						"file_url": "https://jysh.oss-cn-qingdao.aliyuncs.com/community/18-申请办理重度残疾人护理补贴.pdf",
						"ORG_ID": "11210101000000MZJD-04",
						"service_type": "general",
						"type_name": "残疾人福利",
						"type_pid": "11210101000000MZJD",
						"form_url": "https://jysh.oss-cn-qingdao.aliyuncs.com/community/18-%E7%94%B3%E8%AF%B7%E5%8A%9E%E7%90%86%E9%87%8D%E5%BA%A6%E6%AE%8B%E7%96%BE%E4%BA%BA%E6%8A%A4%E7%90%86%E8%A1%A5%E8%B4%B4(%E5%90%88%E5%B9%B6%E8%A1%A8%E5%8D%95).pdf",
						"level": "2",
						"is_wsbl": "1",
						"type_id": "11210101000000MZJD-04",
						"id": "11210101000000MZJD5212000216000",
						"text": "申请办理重度残疾人护理补贴",
						"org_code": "11210101000000MZJD"
					}, {
						"file_url": "https://skv4.oss-cn-hangzhou.aliyuncs.com/app/doc/3-办理城镇居民最低生活保障金停发.pdf",
						"ORG_ID": "11210101000000MZJD-01",
						"service_type": "internet",
						"type_name": "社会救助",
						"type_pid": "11210101000000MZJD",
						"form_url": "https://jysh.oss-cn-qingdao.aliyuncs.com/community/3-%E5%8F%96%E6%B6%88%E4%BD%8E%E4%BF%9D%E5%BE%85%E9%81%87%E9%80%9A%E7%9F%A5%E5%8D%95.pdf",
						"level": "2",
						"is_wsbl": "0",
						"type_id": "11210101000000MZJD-01",
						"id": "11210101000000MZJD5212000173000",
						"text": "办理城镇居民最低生活保障金停发",
						"org_code": "11210101000000MZJD"
					}, {
						"file_url": "https://jysh.oss-cn-qingdao.aliyuncs.com/community/6-办理城镇居民最低生活保障证件年审.pdf",
						"ORG_ID": "11210101000000MZJD-01",
						"service_type": "general",
						"type_name": "社会救助",
						"type_pid": "11210101000000MZJD",
						"level": "2",
						"is_wsbl": "0",
						"type_id": "11210101000000MZJD-01",
						"id": "11210101000000MZJD5212000179000",
						"text": "申请办理城镇居民最低生活保障证件年审",
						"org_code": "11210101000000MZJD"
					}, {
						"file_url": "https://jysh.oss-cn-qingdao.aliyuncs.com/community/13-申请办理低保家庭失能老人护理补贴.pdf",
						"ORG_ID": "11210101000000MZJD-02",
						"service_type": "general",
						"type_name": "老年福利",
						"type_pid": "11210101000000MZJD",
						"form_url": "https://jysh.oss-cn-qingdao.aliyuncs.com/community/13-%E5%A4%B1%E8%83%BD%E8%80%81%E4%BA%BA%E6%8A%A4%E7%90%86%E8%A1%A5%E8%B4%B4%E7%94%B3%E8%AF%B7%E5%AE%A1%E6%89%B9%E8%A1%A8.pdf",
						"level": "2",
						"is_wsbl": "0",
						"type_id": "11210101000000MZJD-02",
						"id": "11210101000000MZJD5212000180000",
						"text": "申请办理低保家庭失能老人护理补贴",
						"org_code": "11210101000000MZJD"
					}, {
						"file_url": "https://jysh.oss-cn-qingdao.aliyuncs.com/community/9-申请办理救急难.pdf",
						"ORG_ID": "11210101000000MZJD-01",
						"service_type": "general",
						"type_name": "社会救助",
						"type_pid": "11210101000000MZJD",
						"form_url": "https://jysh.oss-cn-qingdao.aliyuncs.com/community/9-%E6%95%91%E6%80%A5%E9%9A%BE%E6%83%85%E5%86%B5%E7%99%BB%E8%AE%B0%E8%A1%A8.pdf",
						"level": "2",
						"is_wsbl": "0",
						"type_id": "11210101000000MZJD-01",
						"id": "11210101000000MZJD5212000189000",
						"text": "申请“救急难”",
						"org_code": "11210101000000MZJD"
					}, {
						"file_url": "https://jysh.oss-cn-qingdao.aliyuncs.com/community/14-申请办理儿童福利证(社会散居孤儿).pdf",
						"ORG_ID": "11210101000000MZJD-03",
						"service_type": "general",
						"type_name": "儿童福利",
						"type_pid": "11210101000000MZJD",
						"form_url": "https://jysh.oss-cn-qingdao.aliyuncs.com/community/14-%E6%B2%88%E9%98%B3%E5%B8%82%E5%84%BF%E7%AB%A5%E7%A6%8F%E5%88%A9%E8%AF%81%E7%94%B3%E8%AF%B7%E8%A1%A8.pdf",
						"level": "2",
						"is_wsbl": "0",
						"type_id": "11210101000000MZJD-03",
						"id": "11210101000000MZJD5212000222000",
						"text": "申请办理儿童福利证（社会散居孤儿）",
						"org_code": "11210101000000MZJD"
					}, {
						"file_url": "https://jysh.oss-cn-qingdao.aliyuncs.com/community/12-申请办理特困人员身份确认.pdf",
						"ORG_ID": "11210101000000MZJD-01",
						"service_type": "general",
						"type_name": "社会救助",
						"type_pid": "11210101000000MZJD",
						"form_url": "https://jysh.oss-cn-qingdao.aliyuncs.com/community/12-%E7%94%B3%E8%AF%B7%E5%8A%9E%E7%90%86%E7%89%B9%E5%9B%B0%E4%BA%BA%E5%91%98%E8%BA%AB%E4%BB%BD%E7%A1%AE%E8%AE%A4(%E5%90%88%E5%B9%B6%E8%A1%A8%E5%8D%95).pdf",
						"level": "2",
						"is_wsbl": "0",
						"type_id": "11210101000000MZJD-01",
						"id": "11210101000000MZJD5212000322000",
						"text": "申请办理特困人员身份确认",
						"org_code": "11210101000000MZJD"
					}, {
						"file_url": "https://jysh.oss-cn-qingdao.aliyuncs.com/community/7-申请办理最低生活保障人员劳动能力鉴定.pdf",
						"ORG_ID": "11210101000000MZJD-01",
						"service_type": "general",
						"type_name": "社会救助",
						"type_pid": "11210101000000MZJD",
						"form_url": "https://jysh.oss-cn-qingdao.aliyuncs.com/community/7-%E4%BD%8E%E4%BF%9D%E4%BA%BA%E5%91%98%E5%8A%B3%E5%8A%A8%E8%83%BD%E5%8A%9B%E8%AE%A4%E5%AE%9A%E8%A1%A8.pdf",
						"level": "2",
						"is_wsbl": "0",
						"type_id": "11210101000000MZJD-01",
						"id": "11210101000000MZJD5212000323000",
						"text": "申请办理最低生活保障人员劳动能力鉴定",
						"org_code": "11210101000000MZJD"
					}, {
						"file_url": "https://jysh.oss-cn-qingdao.aliyuncs.com/community/5-申请办理城镇低保户、低保边缘户居民采暖补贴.pdf",
						"ORG_ID": "11210101000000MZJD-01",
						"service_type": "general",
						"type_name": "社会救助",
						"type_pid": "11210101000000MZJD",
						"form_url": "https://jysh.oss-cn-qingdao.aliyuncs.com/community/5-%E4%BD%8E%E4%BF%9D%E6%88%B7%E5%8F%96%E6%9A%96%E8%B4%B9%E8%A1%A5%E8%B4%B4%E8%AE%A4%E5%AE%9A%E4%B8%93%E7%94%A8%E5%8D%A1.pdf",
						"level": "2",
						"is_wsbl": "0",
						"type_id": "11210101000000MZJD-01",
						"id": "11210101000000MZJD5212000327000",
						"text": "申请办理城镇低保户、低保边缘户居民采暖补贴",
						"org_code": "11210101000000MZJD"
					}, {
						"file_url": "https://jysh.oss-cn-qingdao.aliyuncs.com/community/11-申请办理城镇居民低保跨区迁移.pdf",
						"ORG_ID": "11210101000000MZJD-01",
						"service_type": "general",
						"type_name": "社会救助",
						"type_pid": "11210101000000MZJD",
						"form_url": "https://jysh.oss-cn-qingdao.aliyuncs.com/community/11-%E4%BD%8E%E4%BF%9D%E6%88%B7%E8%BF%81%E7%A7%BB%E6%89%B9%E8%BD%AC%E5%8D%95(%E8%B7%A8%E5%8C%BA).pdf",
						"level": "2",
						"is_wsbl": "0",
						"type_id": "11210101000000MZJD-01",
						"id": "11210101000000MZJD5212000328000",
						"text": "申请办理城镇居民低保跨区迁移",
						"org_code": "11210101000000MZJD"
					}, {
						"file_url": "https://jysh.oss-cn-qingdao.aliyuncs.com/community/1-申请办理城镇居民最低生活保障.pdf",
						"ORG_ID": "11210101000000MZJD-01",
						"service_type": "seal",
						"type_name": "社会救助",
						"type_pid": "11210101000000MZJD",
						"form_url": "https://jysh.oss-cn-qingdao.aliyuncs.com/community/1-%E7%94%B3%E8%AF%B7%E5%8A%9E%E7%90%86%E5%9F%8E%E9%95%87%E5%B1%85%E6%B0%91%E6%9C%80%E4%BD%8E%E7%94%9F%E6%B4%BB%E4%BF%9D%E9%9A%9C(%E5%90%88%E5%B9%B6%E8%A1%A8%E5%8D%95).pdf",
						"level": "2",
						"is_wsbl": "0",
						"type_id": "11210101000000MZJD-01",
						"id": "11210101000000MZJD5212000330000",
						"text": "申请办理城镇居民最低生活保障（城镇居民低保边缘救助）",
						"org_code": "11210101000000MZJD"
					}, {
						"file_url": "https://jysh.oss-cn-qingdao.aliyuncs.com/community/17-办理困难残疾人生活补贴续领.pdf",
						"ORG_ID": "11210101000000MZJD-04",
						"service_type": "general",
						"type_name": "残疾人福利",
						"type_pid": "11210101000000MZJD",
						"level": "2",
						"is_wsbl": "0",
						"type_id": "11210101000000MZJD-04",
						"id": "11210101000000MZJD5212000344000",
						"text": "办理困难残疾人生活补贴续领",
						"org_code": "11210101000000MZJD"
					}, {
						"file_url": "https://jysh.oss-cn-qingdao.aliyuncs.com/community/19-办理重度残疾人护理补贴续领.pdf",
						"ORG_ID": "11210101000000MZJD-04",
						"service_type": "general",
						"type_name": "残疾人福利",
						"type_pid": "11210101000000MZJD",
						"level": "2",
						"is_wsbl": "0",
						"type_id": "11210101000000MZJD-04",
						"id": "11210101000000MZJD5212000346000",
						"text": "办理重度残疾人护理补贴续领",
						"org_code": "11210101000000MZJD"
					}, {
						"file_url": "https://jysh.oss-cn-qingdao.aliyuncs.com/community/4-申请续领城镇居民最低生活保障金.pdf",
						"ORG_ID": "11210101000000MZJD-01",
						"service_type": "general",
						"type_name": "社会救助",
						"type_pid": "11210101000000MZJD",
						"level": "2",
						"is_wsbl": "0",
						"type_id": "11210101000000MZJD-01",
						"id": "11210101000000MZJD5212000350000",
						"text": "申请续领城镇居民最低生活保障金",
						"org_code": "11210101000000MZJD"
					}, {
						"file_url": "https://jysh.oss-cn-qingdao.aliyuncs.com/community/2-办理城镇居民最低生活保障金额调整.pdf",
						"ORG_ID": "11210101000000MZJD-01",
						"service_type": "general",
						"type_name": "社会救助",
						"type_pid": "11210101000000MZJD",
						"form_url": "https://jysh.oss-cn-qingdao.aliyuncs.com/community/2-%E4%BF%9D%E9%9A%9C%E9%87%91%E8%B0%83%E6%95%B4%E5%AE%A1%E6%89%B9%E8%A1%A8.pdf",
						"level": "2",
						"is_wsbl": "0",
						"type_id": "11210101000000MZJD-01",
						"id": "11210101000000MZJD5212000351000",
						"text": "办理城镇居民最低生活保障金额调整",
						"org_code": "11210101000000MZJD"
					}, {
						"file_url": "https://jysh.oss-cn-qingdao.aliyuncs.com/community/10-申请办理城镇居民低保区内迁移.pdf",
						"ORG_ID": "11210101000000MZJD-01",
						"service_type": "general",
						"type_name": "社会救助",
						"type_pid": "11210101000000MZJD",
						"level": "2",
						"is_wsbl": "0",
						"type_id": "11210101000000MZJD-01",
						"id": "11210101000000MZJD5212000353000",
						"text": "申请办理城镇居民低保区内迁移",
						"org_code": "11210101000000MZJD"
					}, {
						"file_url": "https://skv4.oss-cn-hangzhou.aliyuncs.com/app/doc/21-办理60年代精简退职职工生活待遇生存认定.pdf",
						"ORG_ID": "11210101000000MZJD-05",
						"service_type": "seal",
						"type_name": "60精简职工待遇",
						"type_pid": "11210101000000MZJD",
						"level": "2",
						"is_wsbl": "0",
						"type_id": "11210101000000MZJD-05",
						"id": "11210101000000MZJD5212000354000",
						"text": "60年代精简退职职工生活待遇生存认定",
						"org_code": "11210101000000MZJD"
					}, {
						"file_url": "https://skv4.oss-cn-hangzhou.aliyuncs.com/app/doc/20-申请办理60年代精简退职职工生活待遇.pdf",
						"ORG_ID": "11210101000000MZJD-05",
						"service_type": "general",
						"type_name": "60精简职工待遇",
						"type_pid": "11210101000000MZJD",
						"form_url": "https://jysh.oss-cn-qingdao.aliyuncs.com/community/20-%E6%B2%88%E9%98%B3%E5%B8%82%E7%A7%BB%E4%BA%A4%E6%B0%91%E6%94%BF%E9%83%A8%E9%97%A8%E7%AE%A1%E7%90%8660%E5%B9%B4%E4%BB%A3%E7%B2%BE%E7%AE%80%E8%81%8C%E5%B7%A5%E7%99%BB%E8%AE%B0%E5%AE%A1%E6%89%B9%E8%A1%A8.pdf",
						"level": "2",
						"is_wsbl": "0",
						"type_id": "11210101000000MZJD-05",
						"id": "11210101000000MZJD5212000355000",
						"text": "申请办理60年代精简退职职工生活待遇",
						"org_code": "11210101000000MZJD"
					}, {
						"file_url": "https://skv4.oss-cn-hangzhou.aliyuncs.com/app/doc/15-申请续发孤儿基本生活费.pdf",
						"ORG_ID": "11210101000000MZJD-03",
						"service_type": "general",
						"type_name": "儿童福利",
						"type_pid": "11210101000000MZJD",
						"level": "2",
						"is_wsbl": "0",
						"type_id": "11210101000000MZJD-03",
						"id": "11210101000000MZJD5212000403000",
						"text": "申请续发孤儿基本生活费（年满18周岁在读孤儿）",
						"org_code": "11210101000000MZJD"
					}],
					"name": "民政",
					"pid": "0",
					"id": "11210101000000MZJD"
				}, {
					"level": "1",
					"name": "人力资源社会保障",
					"pid": "0",
					"datalist": [],
					"id": "11210101000000RSJD"
				}, {
					"level": "1",
					"name": "房产",
					"pid": "0",
					"datalist": [],
					"id": "11210101000000FCJD"
				}, {
					"level": "1",
					"datalist": [],
					"name": "卫生健康",
					"pid": "0",
					"id": "11210101000000WJJD"
				}, {
					"level": "1",
					"name": "医保",
					"datalist": [],
					"pid": "0",
					"id": "112101010000YLBZJD"
				}, {
					"level": "1",
					"name": "工会",
					"datalist": [],
					"pid": "0",
					"id": "1121010100000ZGHJD"
				}, {
					"level": "1",
					"name": "残联",
					"datalist": [],
					"pid": "0",
					"id": "11210101000000CLJD"
				}, {
					"level": "1",
					"datalist": [{
						"file_url": "https://jysh.oss-cn-qingdao.aliyuncs.com/community/22-申请办理社区证明事项.pdf",
						"ORG_ID": "0000000006",
						"service_type": "seal",
						"type_name": "社区证明",
						"type_pid": "0",
						"form_url": "",
						"level": "1",
						"is_wsbl": "1",
						"type_id": "0000000006",
						"id": "11210103001606506X5212000329000",
						"text": "申请办理社区居住证明",
						"org_code": "0000000006"
					}, {
						"file_url": "https://jysh.oss-cn-qingdao.aliyuncs.com/community/22-申请办理社区证明事项.pdf",
						"ORG_ID": "0000000006",
						"service_type": "seal",
						"type_name": "社区证明",
						"type_pid": "0",
						"level": "1",
						"is_wsbl": "1",
						"type_id": "0000000006",
						"id": "21210103001606506X5212000329000",
						"text": "申请办理社区死亡证明",
						"org_code": "0000000006"
					}, {
						"ORG_ID": "0000000006",
						"service_type": "seal",
						"type_name": "社区证明",
						"type_pid": "0",
						"level": "1",
						"is_wsbl": "1",
						"type_id": "0000000006",
						"id": "51210103001606506X5212000329000",
						"text": "申请办理居民通行证（纸质证）",
						"org_code": "0000000006"
					}],
					"name": "社区证明",
					"pid": "0",
					"id": "0000000006"
				}, {
					"level": "1",
					"datalist": [],
					"name": "其他",
					"pid": "0",
					"id": "0000000007"
				}]

			};
		},
		onLoad() {
			console.log(this.dataList)
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
		},
		onReady() {
			uni.hideLoading()
		},
		methods: {
			TabSelect(e) {
				this.tabCur = e.currentTarget.dataset.id;
				this.mainCur = e.currentTarget.dataset.id;
				this.verticalNavTop = (e.currentTarget.dataset.id - 1) * 50
			},
			VerticalMain(e) {
				// #ifdef MP-ALIPAY
				   return false  //支付宝小程序暂时不支持双向联动 
				// #endif
				let that = this;
				let tabHeight = 0;
				if (this.load) {
					for (let i = 0; i < this.list.length; i++) {
						let view = uni.createSelectorQuery().select("#main-" + this.list[i].id);
						view.fields({
							size: true
						}, data => {
							this.list[i].top = tabHeight;
							tabHeight = tabHeight + data.height;
							this.list[i].bottom = tabHeight;
						}).exec();
					}
					this.load = false
				}
				let scrollTop = e.detail.scrollTop + 10;
				for (let i = 0; i < this.list.length; i++) {
					if (scrollTop > this.list[i].top && scrollTop < this.list[i].bottom) {
						this.verticalNavTop = (this.list[i].id - 1) * 50
						this.tabCur = this.list[i].id
						console.log(scrollTop)
						return false
					}
				}
			}
		},
	}
</script>

<style>
	.screen-swiper{
		min-height: inherit;
	}
	.fixed {
		position: fixed;
		z-index: 99;
	}

	.VerticalNav.nav {
		width: 200upx;
		white-space: initial;
	}

	.VerticalNav.nav .cu-item {
		width: 100%;
		text-align: center;
		background-color: #fff;
		margin: 0;
		border: none;
		height: 50px;
		position: relative;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		padding: 0 5px;
		display:inherit;
	}

	.VerticalNav.nav .cu-item.cur {
		background-color: #f1f1f1;
	}

	.VerticalNav.nav .cu-item.cur::after {
		content: "";
		width: 8upx;
		height: 30upx;
		border-radius: 10upx 0 0 10upx;
		position: absolute;
		background-color: currentColor;
		top: 0;
		right: 0upx;
		bottom: 0;
		margin: auto;
	}

	.VerticalBox {
		display: flex;
	}

	.VerticalMain {
		background-color: #f1f1f1;
		flex: 1;
	}
	.cu-list.menu-avatar>.cu-item{
		height: inherit;
		justify-content: flex-start;
		padding: 10px;
	}
</style>
